<template>
  <view class="consultation-page">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="back-btn" @click="goBack">←</view>
      <text class="nav-title">在线问诊</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-bar">
        <view class="search-icon">🔍</view>
        <input class="search-input" placeholder="输入医生/疾病搜索" />
      </view>
    </view>

    <!-- 专家推荐 -->
    <view class="expert-section">
      <view class="section-header">
        <view class="section-bar"></view>
        <text class="section-title">专家推荐</text>
      </view>
      <scroll-view class="expert-scroll" scroll-x="true">
        <view class="expert-list">
          <view
            class="expert-card"
            v-for="(expert, index) in experts"
            :key="index"
          >
            <image
              class="expert-avatar"
              :src="expert.avatar"
              mode="aspectFill"
            />
            <text class="expert-name">{{ expert.name }}</text>
            <text class="expert-title">{{ expert.title }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 筛选选项 -->
    <view class="filter-section">
      <view class="filter-item">
        <text class="filter-text">全部医院</text>
        <text class="filter-arrow">▼</text>
      </view>
      <view class="filter-item">
        <text class="filter-text">全部科室</text>
        <text class="filter-arrow">▼</text>
      </view>
      <view class="filter-item">
        <text class="filter-text">全部职称</text>
        <text class="filter-arrow">▼</text>
      </view>
    </view>
    <view class="filter-divider"></view>

    <!-- 医生列表 -->
    <view class="doctor-list">
      <view class="doctor-card" v-for="(doctor, index) in doctors" :key="index">
        <image class="doctor-avatar" :src="doctor.avatar" mode="aspectFill" />
        <view class="doctor-info">
          <text class="doctor-name">{{ doctor.name }}</text>
          <text class="doctor-hospital">{{ doctor.hospital }}</text>
          <text class="doctor-specialties">擅长: {{ doctor.specialties }}</text>
        </view>
        <view class="consult-btn" @click="startConsultation(doctor)">
          <text class="consult-icon">💬</text>
          <text class="consult-text">咨询</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const experts = ref([
  {
    name: "张医生",
    title: "内科专家",
    avatar: "/static/tabbar/i1.png",
  },
  {
    name: "李医生",
    title: "外科专家",
    avatar: "/static/tabbar/i2.png",
  },
  {
    name: "王医生",
    title: "儿科专家",
    avatar: "/static/tabbar/i3.png",
  },
]);

const doctors = ref([
  {
    name: "张医生",
    hospital: "北京协和医院",
    specialties: "内科疾病、慢性病管理",
    avatar: "/static/tabbar/i1.png",
  },
  {
    name: "李医生",
    hospital: "上海瑞金医院",
    specialties: "外科手术、创伤治疗",
    avatar: "/static/tabbar/i2.png",
  },
  {
    name: "王医生",
    hospital: "广州中山医院",
    specialties: "儿科疾病、儿童保健",
    avatar: "/static/tabbar/i3.png",
  },
]);

const startConsultation = (doctor) => {
  uni.navigateTo({
    url: `/pages/chat-detail/chat-detail?doctorName=${doctor.name}`,
  });
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.consultation-page {
  background: #fff;
  min-height: 100vh;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  font-size: 40rpx;
  color: #32cd32;
  margin-right: 20rpx;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #32cd32;
}

/* 搜索框 */
.search-container {
  padding: 30rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2rpx solid #e8f5e8;
  border-radius: 25rpx;
  padding: 20rpx 25rpx;
  box-shadow: 0 4rpx 20rpx rgba(50, 205, 50, 0.1);
}

.search-icon {
  font-size: 36rpx;
  color: #32cd32;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
}

/* 专家推荐 */
.expert-section {
  padding: 0 30rpx 30rpx 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-bar {
  width: 8rpx;
  height: 40rpx;
  background: #32cd32;
  border-radius: 4rpx;
  margin-right: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.expert-scroll {
  white-space: nowrap;
}

.expert-list {
  display: flex;
  gap: 20rpx;
}

.expert-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 25rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  min-width: 160rpx;
  display: inline-block;
}

.expert-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 15rpx;
}

.expert-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.expert-title {
  font-size: 24rpx;
  color: #666;
}

/* 筛选选项 */
.filter-section {
  display: flex;
  padding: 0 30rpx;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.filter-item {
  flex: 1;
  background: #fff;
  border-radius: 15rpx;
  padding: 20rpx 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f0f0f0;
}

.filter-text {
  font-size: 26rpx;
  color: #333;
}

.filter-arrow {
  font-size: 20rpx;
  color: #999;
}

.filter-divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 0 30rpx 30rpx 30rpx;
}

/* 医生列表 */
.doctor-list {
  padding: 0 30rpx;
}

.doctor-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #f0f0f0;
}

.doctor-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.doctor-hospital {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.doctor-specialties {
  font-size: 24rpx;
  color: #ff6b35;
}

.consult-btn {
  background: #32cd32;
  border-radius: 25rpx;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  color: #fff;
  box-shadow: 0 4rpx 15rpx rgba(50, 205, 50, 0.3);
}

.consult-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.consult-text {
  font-size: 26rpx;
  font-weight: bold;
}
</style>
